<template>
  <div class="login">
      <div class="login_box">
          <div class="login_logoImg"></div>
          <!-- rules是指表单验证的规则，给要验证的表单项添加prop属性 -->
          <!-- ref属性是为了获取表单对象，使用他的方法 -->
          <el-form ref="loginFormRef" class='login_form' :model="loginForm" :rules="loginFormRules">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                placeholder="用户名"
                prefix-icon="el-icon-user"
                v-model="loginForm.username">
              </el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                v-model="loginForm.password">
              </el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="bnts">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
          </el-form>
      </div>
  </div>
</template>

<script>
// 默认导出
export default {
    data(){
        return{
            // 表单元素的数据绑定
            loginForm :{
                username:'admin',
                password:'123456',
            },
            // 表单的验证规则对象
            loginFormRules :{
                // 验证用户名的规则,trigger表示触发的条件  blur：失去焦点
                username:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min:2, max: 10, message: '长度在2 到 10 个字符', trigger: 'blur' }
                ],
                // 验证密码的规则
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 16, message: '长度在6 到 16 个字符', trigger: 'blur' }
                ]
            }
        }
    },   
    methods:{
        // 重置
        resetLoginForm(){
            // this指的是这个单文件组件对象
            // console.log(this);

            //loginFormRef是指表单的引用对象，是上面ref属性定义的
            // resetFields方法-->对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.loginFormRef.resetFields();
        },
        // 登录
        login(){
            this.$refs.loginFormRef.validate(async (valid,obj)=>{
                // 预验证成功: valid值为true
                // console.log(valid);
                // console.log(obj);
                if(!valid) return;
                let res = await this.$http.post('login',this.loginForm);
                console.log(res.data);
                if(res.data.meta.status!==200) return this.$message.error('登录失败');
                this.$message.success('登录成功');

                // 登录成功之后：
                window.sessionStorage.setItem("token",res.data.data.token);
                this.$router.push('/home');
           });
        }
    }
}

/*
登录成功之后的操作：
    1．将登录成功之后的 token，保存到客户端的sessionstorage中
        1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        1.2 token 只应在当前网站打开期间生效，所以将 token保存在 sessionStorage 中
        1.3 为什么不保存在localStorage中呢？ 因为localStorage保存是一直生效的，
            而我们只需要在当前网页打开期间生效。
    2．通过编程式导航跳转到届台主页，路由地址是/home
*/

</script>

<style scoped>
    .login{
        background-color: #264A6B;
        height: 100%;
        position: relative;
    }
    .login_box{
        width: 460px;
        height: 300px;
        background-color: #fff;
        border-radius: 5px;
        /* 垂直+水平居中 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

    /* logo图片的样式 */
    .login_logoImg{
        width: 140px;
        height: 140px;
        border-radius: 70px;
        border: 2px solid #555;
        /* 阴影 */
        box-shadow: 0 0 15px;

        background-image: url("../assets/images/logo.jpg");
        background-size: 100% 100%;

        /* logo图片的位置 */
        position: absolute;
        left: 50%;
        top: 0%;
        transform: translate(-50%,-50%);
    }

    .login_form{
        width: 80%;
       
        position: absolute;
        left: 50%;
        bottom:5px;
        transform: translate(-50%,0%);
    }
    .login_form .bnts{
        display: flex;
        /* 居右对齐 */
        justify-content: flex-end;
    }

    /* 输入框的字体大小 */
    .el-input{
        font-size: 18px;
    }

</style>